<template>
	<view class="pwd">
		<view style="padding: 150rpx 3% 30rpx;">
			<view style="text-align: center;font-size:36rpx;font-weight: 700;color:#999">请输入密码</view>
		</view>
		<view class="box" @click="show">
			<view v-for="(item , index) in pasList" :key='index' style="flex: 1;">
				<view>
					<text v-if="passwordArray.length > index" style="font-size:80upx;position: relative;top: -8upx;">●</text>
				</view>
			</view>
		</view>
		<view class v-if="mask" style="background: rgba(0,0,0,0.4);top: 0;z-index: 9999;overflow: hidden;">
			<view class="bot masks">
				<view style="display: flex;flex-wrap: wrap;text-align: center;">
					<view v-for="(num , indexs) in numbr " :key='indexs' @tap="passwordBox(num)" hover-class="hover" :hover-stay-time='20' class="password">
						{{num}}
					</view>
					<view @tap="reset()" class="password" style="background: #ccc;color: #fff;">重置</view>
					<view @tap="passwordBox(0)" hover-class="hover" :hover-stay-time='20' class="password">0</view>
					<view @tap="backspace()" class="password" style="background: #ccc;color: #fff;">删除</view>
				</view>
			</view>
		</view>
		<!-- <view class="forget">不能是连续数字</view> -->
		<view class="editpwdbtn" @click="next">确认</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				password: '',
				mask: false,
				passwordArray: [],
				bott: '',
				pasList: ['', '', '', '', '', ''],
				numbr: [1, 2, 3, 4, 5, 6, 7, 8, 9],
				pwd:''
			}
		},
		methods: {
			next(){
				for(var i=0;i<this.passwordArray.length;i++){
					this.pwd=this.pwd+this.passwordArray[i]
				}
				this.request('/member/editMember',{pay_password:this.pwd}).then(res => {
					if(res.data.code==1){
						this.$tip(res.data.msg)
						setTimeout(() => {
						   uni.navigateBack()
						}, 500)
					}else{
						this.$tip(res.data.msg)
					}
				})
			},
			show(){
				
				this.mask=!this.mask
			},
			// 密码框
			passwordBox(num) {
				if (this.passwordArray.length < 6) {
					this.passwordArray.push(num)
				}
				if (this.passwordArray.length == 6) {
					// var str = ''
					// for (let i = 0; i < this.passwordArray.length; i++) {
					// 	str += this.passwordArray[i];
					// }
					// console.log(str)
					// this.password = str
					// this.mask = false
					// this.passwordArray = []
					// this.bott = ''
					// uni.showLoading({
					// 	title: '加载中。。。',
					// 	icon: 'none'
					// });
					// if (this.current == 0) {
					// 	this.XXXX()
					// } else if (this.current == 1) {
					// 	this.XXXXXX()
					// } else {
					// 	uni.showToast({
					// 		title: '跳转....',
					// 		duration: 2000,
					// 		icon: 'none',
					// 		mask: true
					// 	});
					// }
				}
			},
			reset() {
				this.passwordArray = []
				this.pwd=''
			},
			backspace() {
				this.passwordArray.pop()
				this.pwd=''
			},
			masks() {
				let _this = this
				this.mask = true
				setTimeout(()=> {
					_this.bott = 'bot'
				}, 50)
			},
			maskss() {
				this.mask = false
				this.bott = ''
				this.passwordArray = []
			},
			// end
			
		}
	}
</script>

<style lang="scss" scoped>
	.pwd{
		background-color: $uni-background-color;
		height: 100%;
	}
	.forget{
		margin:20rpx 0 80rpx;
		color: #999;
		font-size: 24rpx;
		text-align: center;
	}
	.editpwdbtn{
		width: 660rpx;
		margin: 0 auto;
		height: 88rpx;
		background: $uni-item-color;
		text-align: center;
		line-height: 88rpx;
		border-radius: 10rpx;
		color: #fff;
	}
	.box{
		display: flex;
		width: 660rpx;
		margin: 5% auto;
		text-align: center;
		border: 2rpx solid #bbb;
		border-radius: 10rpx;
		height: 110rpx;
		&>view{
			border-right: 1rpx solid #bbb;
			background-color: #fff;
			view{
				text-align: center;
			}
		}
		&>view:nth-of-type(6){
			border: none;
			border-radius:0 10rpx 10rpx 0;
		}
		&>view:nth-of-type(1){
			border-radius: 10rpx 0 0 10rpx;
		}
	}
	.password{
		width: 25%;
		flex-grow:1;
		padding: 3%;
		font-size:40upx;
		box-shadow:0px 0px 1upx #ccc;
		text-align: center;
	}
	.hover{
		background: #eee;
	}
	.masks{
		bottom:-50%;
		position: fixed;
		background: #fff;
		width: 100%;
		transition:.5s
	}
	.bot{
		bottom: 0;
	}
</style>
